<template>
	<div class="app-container">
		<div class="content">
			<nextnav :navnum='navnum'></nextnav>
			<div v-if="lists.length!=0">
				<div class="search">
				<el-input v-model="search" size="mini" class="nametext" placeholder="请输入批次名称"></el-input>
				<button @click="searchlist">搜索</button>
			</div>
			<div class="listsout">
				<div class="lists">
					<div class="onelist" v-for="(item,index) in lists" :class="indexs==index?'activeclass':''" @click="chose(item,index)">
						<p class="isshow" v-if="item.isTemplate">系统</p>
						<div class="onelist_top">
							<p class="insuranceName">{{item.batchName}}</p>
							<div class="timeconent">
								<p>
									{{item.effectiveDate_date}}
									<span class="seconds">{{item.effectiveDate_second}}</span>
								</p>
								<p class="division">到</p>
								<p v-if="item.expiryDate">
									{{item.expiryDate_date}}
									<span class="seconds">{{item.expiryDate_second}}</span>
								</p>
								<p v-else>不限</p>
							</div>
						</div>
						<div class="onelist_bom" @click="go(item)">
							查看
						</div>
						<div class="backgrounds">

						</div>
					</div>
				</div>
			</div>
			<div class="paging">
				<el-pagination @size-change="handleSize" @current-change="handleCurrent" :current-page="1" background layout="sizes, pager, jumper" :page-sizes="[8, 16, 24, 32]" :page-size="8" :total="totals">
				</el-pagination>
			</div>
			<div class="btnnext">
				<button class="next" @click="nextpage">下一步</button>
			</div>
		
			</div>
			<div v-else class="nodata">
			暂无数据
		</div>
		</div>
		
	</div>
</template>

<script>
	import ceshi from './ceshi'
	import Vue from 'vue'
	import nextnav from './assembly/nextnav'
	export default {
		data() {
			return {
				navnum: 0,
				search: "",
				lists: [],
				page: 1,
				size: 8,
				totals: 10,
				batchId: "",
				batchType: "",
				batchTypeId: "",
				indexs: null
			}
		},
		mounted() {
			this.getlist()
		},
		methods: {
			//查看详情
			go(val) {
				if(val.batchType == 0 || val.batchType == 1) {
					this.$router.push({
						name: "policyupCdetail",
						query: {
							batchId: val.id
						}
					})
				} else {
					//							this.$router.push({
					//								name:"policyupper3s",
					//								query:{
					//									batchId:val.id
					//								}
					//							})
				}
			},
			//获取数据
			getlist() {
				///api/services/app/policy/GetUpperHistoryBatchList
				let params = {
					searchContent: this.search,
					pageSize: this.size,
					pageIndex: this.page
				};
				this.post(params, "services/app/policy/GetUpperHistoryBatchList").then(res => {
					console.log('succ')
					console.log(res)
					this.totals=res.result.totalCount
					this.lists = res.result.items
					for(let i = 0; i < this.lists.length; i++) {
						//effectiveDate
						let effectiveDatearr = this.lists[i].effectiveDate.split(" ")
						this.lists[i].effectiveDate_date = effectiveDatearr[0]
						this.lists[i].effectiveDate_second = effectiveDatearr[1]
						//expiryDate
						if(this.lists[i].expiryDate) {
							let expiryDatearr = this.lists[i].expiryDate.split(" ")
							this.lists[i].expiryDate_date = expiryDatearr[0]
							this.lists[i].expiryDate_second = expiryDatearr[1]
						}
					}
				});
			},
			searchlist() {
				this.getlist()
			},
			handleSize(val) {
				this.indexs = null
				this.size = val
				this.getlist()
			},
			handleCurrent(val) {
				this.indexs = null
				this.page = val
				this.getlist()
			},
			chose(val, index) {
				console.log(val)
				if(index == this.indexs) {
					this.batchId = ''
					this.batchType = ''
					this.batchTypeId = ''
					this.indexs = null
				} else {
					this.indexs = index
					this.batchId = val.id
					this.batchType = val.batchType
					//不清楚值
					//this.batchTypeId=val
				}
			},
			nextpage() {
				if(this.batchId != "") {
					//					let params = {
					//						batchId:this.batchId,
					//						batchType:this.batchType,
					//						batchTypeId:this.batchTypeId
					//					};
					this.$router.push({
						name: 'policydownnew2',
						query: {
							batchId: this.batchId
						}
					})
					//					this.post(params, "services/app/policy/SetBatchType").then(res => {
					//						console.log("success")
					//						console.log(res)
					//						this.$router.push({
					//							path:"/policy/policydownnew2",
					//							query:{
					//								batchId:this.batchId
					//							}
					//						})
					//					});
				} else {
					this.$message({
						message: '请选择模板',
						type: 'warning'
					});
				}

			}
		},
		components: {
			nextnav,
			ceshi
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 1005px;
		height: 100%;
		margin: 0 auto;
		.search {
			width: 100%;
			height: 28px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 13px;
			color: #666666;
			.nametext {
				width: 300px;
				box-sizing: border-box;
				margin-right: 20px;
			}
			button {
				width: 50px;
				height: 28px;
				box-sizing: border-box;
				background: #F7F7F7;
				border: 1px solid #DDDDDD;
				border-radius: 5px;
				outline: none;
			}
		}
		.listsout {
			width: 100%;
			min-height: 130px;
			overflow: hidden;
			margin-top: 20px;
			.lists {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				margin-left: -63px;
				.backgrounds {
					width: 100%;
					height: 10px;
					position: absolute;
					bottom: -10px;
					left: 0;
					background: url(../../assets/images/bomactive2x.png) top center no-repeat;
				}
				.onelist {
					width: 204px;
					height: 90px;
					background: #FFFFFF;
					border: 1px solid #D9D9D9;
					box-shadow: -1px -1px 3px 0 rgba(0, 0, 0, 0.10), 1px 1px 3px 0 rgba(0, 0, 0, 0.10);
					margin-bottom: 40px;
					margin-left: 63px;
					outline: none;
					cursor: pointer;
					box-sizing: border-box;
					position: relative;
					.onelist_top {
						width: 100%;
						height: 68.5px;
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						.insuranceName {
							width: 100%;
							height: 14px;
							margin: 10px 0 7px;
							text-align: center;
							font-size: 12px;
							color: #666666;
						}
					}
					.onelist_bom {
						height: 19.5px;
						width: 100%;
						box-sizing: border-box;
						border-top: 1px solid #E8E8E8;
						font-size: 10px;
						color: #027DCA;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				.activeclass {
					/*border: 1px solid red;*/
					border: 1px solid #FF7819;
					box-shadow: -1px -1px 4px 0 rgba(255, 120, 25, 0.40), 1px 1px 4px 0 rgba(255, 120, 25, 0.40);
					.backgrounds {
						background: url(../../assets/images/bomactive2x.png) top center no-repeat;
					}
				}
			}
		}
	}
	
	.isshow {
		position: absolute;
		top: 0px;
		left: 5px;
		width: 15px;
		height: 28px;
		background: #FB777D;
		color: #FFFFFF;
		font-size: 9px;
		display: flex;
		text-align: center;
		align-items: center;
		margin: 0;
	}
	
	.namestext {
		width: 138px;
		height: 14px;
		font-size: 10px;
		color: #666666;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.timeconent {
		width: 185px;
		height: 31px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: rgba(232, 232, 232, 0.50);
		border-radius: 5px;
		font-size: 10px;
		padding: 0 5px;
		p {
			flex: 5;
			text-align: center;
			color: #027DCA;
			.seconds {
				color: #AEAEAE;
			}
		}
		.division {
			flex: 1;
			margin: 0 5px;
			color: #2A2A2A;
		}
	}
	
	.paging {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	
	.btnnext {
		width: 100%;
		height: 32px;
		margin-top: 36px;
		margin-bottom: 30px;
		display: flex;
		justify-content: center;
		button {
			margin-right: 50px;
			width: 100px;
			height: 32px;
			background: #FF7819;
			color: #FFFFFF;
			border: 1px solid #DDDDDD;
			border-radius: 5px;
			font-size: 14px;
			outline: none;
		}
	}
	
	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>